<template>
  <div class="app">
    <h1 class="title">App组件</h1>
    <hr />
    <h2>求和为：{{ sum }}</h2>
    <h2>名字为：{{ person.name }}</h2>
    <h2>年龄为：{{ person.age }}</h2>
    <hr />
    <h2>汽车品牌：{{ car.brand }}</h2>
    <h2>汽车颜色：{{ car.options.color }}</h2>
    <h2>汽车引擎：{{ car.options.engine }}</h2>

    <button @click="changeSum">sum+1</button>
    <button @click="changeName">修改姓名</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改整个人</button>

    <span> | </span>
    <button @click="changeBrand">修改汽车品牌</button>
    <button @click="changeColor">修改汽车颜色</button>
    <button @click="changeEngine">修改汽车引擎</button>
    <button @click="changeCar">修改整个车</button>
  </div>
</template>

<script setup lang="ts" name="App">
import { shallowReactive, shallowRef } from 'vue'

// 数据
// let sum = ref(0)
// let person = ref({
//   name: '张飒飒',
//   age: 18,
// })

// let car = reactive({
//   brand: '奔驰',
//   options: {
//     color: '红色',
//     engine: 'V8',
//   },
// })

// 其中 shallowRef 是浅层次的Ref【其中 shallowRef 只处理第一层的Ref】
let sum = shallowRef(0)
let person = shallowRef({
  name: '张飒飒',
  age: 18,
})

// 其中 shallowReactive 是浅层次的Ref【其中 shallowReactive 只处理第一层的Ref】
let car = shallowReactive({
  brand: '奔驰',
  options: {
    color: '红色',
    engine: 'V8',
  },
})

// 方法
function changeSum() {
  sum.value += 1
}
// 修改姓名
function changeName() {
  // shallowRef代表的是浅层次的ref，此处的value已经是浅层次的了，name已经是第二层的了
  person.value.name = '李思思'
}
// 修改年龄
function changeAge() {
  // shallowRef代表的是浅层次的ref，此处的value已经是浅层次的了，name已经是第二层的了
  person.value.age += 1
}
// 修改整个人
function changePerson() {
  person.value = {
    name: '李思思',
    age: 18,
  }
}

// 修改汽车品牌
function changeBrand() {
  car.brand = '奥迪'
}
// 修改汽车颜色
function changeColor() {
  car.options.color = '蓝色'
}
// 修改汽车引擎
function changeEngine() {
  car.options.engine = 'V16'
}
function changeCar() {
  Object.assign(car, {
    brand: '宝马',
    options: {
      color: '蓝色',
      engine: 'V24',
    },
  })
}
</script>

<style>
.app {
  background: #ddd;
  border-radius: 10px;
  box-shadow: 0 0 10px;
  padding: 10px;
}
</style>
